<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>定位</title>
		<style type="text/css">
			/* 定位盒子的经典应用:大相小绝 */
				*{
					margin: 0;
					padding: 0;
				}
				.box{
					width: 200px;
					height: 200px;
					background-color: aqua;
					/*	相对定位		*/
					position: relative;
					/* left:左;right: 右;bottom: 下;top: 上; */
					/* left: 100px; */
					/* bottom: 100px; */
					top: 100px;
					left: 100px;
				}
				.nbox{
					width: 300px;
					height: 300px;
					background-color: blueviolet;
					/* 绝对定位 */
					/*绝对定位:绝对定位的元素移动时的参照点是祖先元素的位置
							如果没有祖先元素或祖先元素没有定位，则以浏览器为准定位
							如果祖先元素有定位（相对，绝对，固定），则以最近一级有定位元素作为参考点。*/8
					position: absolute;
					top: 400px;
					right: 300px;
				}
				.bigbox{
					width: 600px;
					height: 600px;
					border: 1px solid pink;
					position: relative;
					left: 0px;
				}
				.bigbox.fubox{
					position: relative;
					left: 0px;
					width: 400px;
					height: 400px;
					border: 1px solid black;
				}
				.bigbox.fubox.erbox{
					position: absolute;
					bottom: 100px;
					width: 200px;
					height: 200px;
					border: 1px solid green;
				}
				.fixed{
					width: 50px;
					height: 200px;
					border: 1px solid blue;
					position: fixed;
					right: 0px;
					top: 300px;
				}
			</style>
		</head>
		<body>
			<div class="box"></div>
			<div class="nbox"></div>
			<div class="bigbox">
				<div class="fubox">
					<div class="erbox"></div>
				</div>
			</div>
			<div class="fixed"></div>
	</body>
</html>
